<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>写日记</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layer/layui.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/menu/write_diary.css}">
</head>
<body>
<div class="container">
    <form id="article" class="form-horizontal" style="margin-top: 15px;">
        <input type="hidden" name="permKey"/>
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="name">名称：</label>
                <div class="col-sm-10">
                    <input type="text" name="name" id="name" class="form-control" placeholder="请输入名称"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="code">编码：</label>
                <div class="col-sm-10">
                    <input class="form-control" id="code" name="code" placeholder="请输入编码"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="url">路径：</label>
                <div class="col-sm-10">
                    <input class="form-control" id="url" name="url" placeholder="请输入路径: '/xx' 开头"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" onclick="submitFrom()" class="btn btn-primary"><i
                            class="fa fa-check pdr5" aria-hidden="true"></i>确定
                    </button>
                    <button type="button" onclick="cancel()" class="btn btn-success">
                        <i class="fa fa-times pdr5"
                           aria-hidden="true"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script th:src="@{/bootstrap/js/jquery.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<!--bootstrap.min.js-->
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script>
    /**
     * 初始化数据
     */
    function init(data) {
        if (data.opt === 'edit') {
            $("input[name='permKey']").val(data.row.permKey);
            $("input[name='name']").val(data.row.name);
            $("input[name='code']").val(data.row.code);
            $("input[name='url']").val(data.row.url);
        }
    }


    /**
     * 提交表单
     */
    function submitFrom() {
        let data = $('#article').serialize();
        //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
        let formData = JSONUtil.serializeFormToJson(data);
        let url = "sys/manage/addOrUpdatePerm";
        ajaxPost(url, formData, function () {
            layer.load(1);
        }, function (result) {
            if (result.code === 200) {
                layer.closeAll('loading');
                parent.editSuccessCallback(formData);
                cancel();
            } else {
                layer.closeAll('loading');
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.closeAll('loading');
            layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
        });
    }

    function cancel() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }


</script>
</html>